021.CLS 让网页布局更稳定

出处：掘金

原作者：ErpanOmer

Cumulative Layout Shift (CLS) 是 Google 的核心网页指标（Core Web Vitals）之一，用于衡量网页在加载过程中发生的视觉稳定性。这一指标的提出旨在改善用户体验，因为频繁的布局变化会让用户感到困惑，甚至误操作

本文将深入探讨 CLS 的定义、计算方式、常见问题以及优化方法，并通过代码实例和工具展示如何高效处理 CLS 问题

什么是 CLS？

CLS 是衡量网页布局在加载或交互过程中发生的非预期视觉移动的总量。它量化了用户因内容移动而体验到的视觉不稳定性

定义：

非预期的变化：当用户未滚动页面或交互时，页面中的内容突然移动
预期的变化：由于用户触发操作而引起的变化（如点击按钮触发弹窗）不计入 CLS

CLS 是如何计算的？

CLS 的计算公式基于以下两个因素：

Impact Fraction（影响分数）：指被移动元素占据的视觉区域相对于视口的比例
- 公式：Impact Fraction = 移动后面积 / 视口面积
Distance Fraction（距离分数）：指移动的元素相对于视口的距离比例
- 公式：Distance Fraction = 移动距离 / 视口高度

CLS = Impact Fraction × Distance Fraction

为什么 CLS 很重要？

用户体验：内容突然移动会导致用户点错按钮或失去上下文，降低体验
SEO 优化：CLS 是 Google 核心网页指标之一，直接影响搜索排名
用户留存：稳定的布局让用户对网站更加信任，减少流失率

FCP 测量方法

JavaScript

借助 web-vitals 库动态检测 CLS 值：

import { onCLS } from 'web-vitals';

onCLS((metric) => {
    console.log('Current CLS value:', metric.value);
});

Lighthouse

使用 Chrome DevTools 的 Lighthouse 生成页面性能报告，可以清晰看到 CLS 的问题来源

Performance 面板

手动调试 CLS 问题：

打开 DevTools，切换到 Performance 标签
记录性能数据并过滤布局变化

常见的 CLS 问题

图片未指定尺寸

问题：加载图片时，页面先渲染文本或其他内容，图片加载后挤压布局

动态加载广告或第三方内容

问题：广告框架加载后推挤主要内容

动态注入内容

问题：加载 JavaScript 时插入新内容导致布局变化

示例：

const newElement = document.createElement('div');
newElement.textContent = '动态内容';
document.body.appendChild(newElement);

如何优化 CLS？

为图片和视频指定尺寸

通过设置宽高属性或使用 CSS aspect-ratio，确保页面在加载时为图片预留空间

<img src="example.jpg" width="400" height="300" alt="example">

img {
    aspect-ratio: 4 / 3;
    width: 100%;
}

为广告和嵌入内容预留空间

确保动态加载的内容在初始渲染时有固定的占位符

<div style="width: 300px; height: 250px;">广告位</div>

避免动态插入内容

在需要动态加载内容时，确保使用占位符或预留空间

const placeholder = document.createElement('div');
placeholder.style.height = '50px';
document.body.appendChild(placeholder);

// 动态加载内容
setTimeout(() => {
    placeholder.textContent = '动态内容';
}, 2000);

优化字体加载

使用 font-display: swap 确保文本在字体加载时显示替代字体，避免内容跳动

避免动画引起的布局变化

在动画中使用 transform 和 opacity 而非 margin 或 width 等影响布局的属性

.bad-example {
    margin-left: 20px; /* 可能导致布局变化 */
}

.good-example {
    transform: translateX(20px); /* 不会影响布局 */
}

工具和实践

Lighthouse

Google 官方工具，生成页面性能报告，提供 CLS 问题的详细分析

WebPageTest

全面测试网站性能，分析 CLS 值和改进建议

Performance 面板

DevTools 中的 Performance 面板可以手动调试布局变化

总结

Cumulative Layout Shift (CLS) 是衡量页面视觉稳定性的关键指标，直接影响用户体验和 SEO 排名。通过为图片和广告指定尺寸、优化动态内容加载、减少字体加载影响等方法，可以有效降低 CLS 值，提升页面性能和用户满意度

在未来的网页开发中，优化 CLS 应成为开发者的标准实践，以确保为用户提供稳定流畅的浏览体验